.bui-tag-group {
  --height: var(--bui-tag-group-divider-height, 13%);
  --tag-color: var(--bui-tag-color, var(--bui-color-gray));
  --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
  --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
  --tag-height: var(--bui-tag-height, 15px);
  --tag-line-height: var(--bui-tag-line-height, 15px);
  --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
  --tag-bg-color-vip: var(--bui-tag-color-vip, fade(#ff866e, 30%));

  display: inline-flex;
  font-family: var(--bui-font-family);

  .bui-tag-outlined {
    background-color: var(--bui-color-white);
  }

  .bui-tag-outlined + .bui-tag-contained {
    margin-left: -1px;
  }

  .bui-tag-outlined:not(:last-child) {
    position: relative;
    border-right-style: dotted;

    &::after {
      top: 0;
    }

    &::before {
      bottom: 0;
    }

    &::after,
    &::before {
      content: '';
      position: absolute;
      right: -1px;
      width: 1px;
      height: var(--height);
      color: #fff;
      background-color: #fff;
      border-right-style: solid;
    }
  }

  .bui-tag:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    &:not(.bui-tag-outlined) {
      border-right: 0;
    }
  }

  .bui-tag:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
  }
}
